<script setup>
import { ref, onMounted } from "vue"
import * as echarts from "echarts"

// 创建一个对 DOM 容器的引用
const radarChartRef = ref(null)

const data = [
  {
    title: "**省",
  },
  ["本周"],
  [
    {
      name: "文本1",
      max: 150,
    },
    {
      name: "文本2",
      max: 150,
    },
    {
      name: "文本3",
      max: 150,
    },
    {
      name: "文本4",
      max: 150,
    },
    {
      name: "文本5",
      max: 150,
    },
  ],
  [43, 100, 28, 3, 150],
]

// 定义 ECharts 的配置项，设置文本颜色为白色，并将内边距设为0
const option = {
  color: ["#9DD060", "#35C96E", "#4DCEF8"],

  tooltip: {},
  grid: {
    left: "0%",
    top: "0%",
    right: "0%",
    bottom: "0%",
    containLabel: true,
  },
  radar: {
    center: ["50%", "55%"], // 确保雷达图居中
    radius: ["25%", "70%"],

    name: {
      textStyle: {
        color: "#72ACD1",
      },
    },

    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.0",
        width: 2,
      },
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        width: 1,
        type: "dotted",
      },
    },
    splitArea: {
      areaStyle: {
        color: ["rgba(255,255,255,.1)", "rgba(255,255,255,0)"],
      },
    },
    indicator: data[2],
  },
  series: [
    {
      name: "",
      type: "radar",
      data: [
        {
          areaStyle: {
            normal: {
              opacity: 0.3,
            },
          },
          value: data[3],
          name: data[1][0],
        },
        {
          areaStyle: {
            normal: {
              opacity: 0.3,
            },
          },
          value: data[4],
          name: data[1][1],
        },
        {
          areaStyle: {
            normal: {
              opacity: 0.3,
            },
          },
          value: data[5],
          name: data[1][2],
        },
      ],
    },
  ],
}

// 在组件挂载时初始化 ECharts
onMounted(() => {
  const chart = echarts.init(radarChartRef.value) // 初始化 ECharts 实例
  chart.setOption(option) // 应用配置

  // 窗口大小变化时自适应
  window.addEventListener("resize", () => {
    chart.resize()
  })
})
</script>

<template>
  <div class="line-chart">
    <div class="chart-header">
      <h2>雷达图</h2>
    </div>
    <div class="chart-body">
      <div ref="radarChartRef" class="chart-content"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.line-chart {
  height: 100%;
  width: 100%;

  .chart-header {
    height: 15%;
    border-bottom: 1px solid rgba(7, 118, 181, 0.7);
    font-weight: 500;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    &::after {
      width: 100%;
      height: 1px;
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
      box-shadow: 0 0 5px rgba(131, 189, 227, 1);
      opacity: 0.6;
    }

    &::before {
      position: absolute;
      content: "";
      width: 6px;
      height: 6px;
      background: rgba(22, 214, 255, 0.9);
      box-shadow: 0 0 5px rgba(22, 214, 255, 0.9);
      border-radius: 10px;
      left: 10px;
      top: 50%;
      transform: translate(0, -50%);
    }

    h2 {
      font-weight: 500;
      font-size: 16px;
      margin-left: 30px;
    }
  }

  .chart-body {
    height: 85%;
    padding: 0 10px 10px;
    display: flex; /* 使用flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }

  .chart-content {
    width: 100%;
    height: 100%;
  }
}
</style>
